import React, { useState, useEffect } from 'react';
import {
  getHabits,
  getMetrics,
  recordHabit,
  updateWaterIntake,
  updateSteps,
  updateSleep,
  addHabit,
  deleteHabit,
  updateHabit,
  resetDailyHabits,
  type HabitRecord,
  type MetricData
} from './utils/storage';

export default function SimpleDashboard() {
  // Active tab state
  const [activeTab, setActiveTab] = useState<'dashboard' | 'habits' | 'stats'>('dashboard');
  
  // User data state
  const [metrics, setMetrics] = useState<MetricData | null>(null);
  
  // Habits state
  const [habits, setHabits] = useState<HabitRecord[]>([]);

  // Form state for creating/editing habits
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editingHabit, setEditingHabit] = useState<HabitRecord | null>(null);
  const [newHabitName, setNewHabitName] = useState('');
  const [newHabitIcon, setNewHabitIcon] = useState('📝');

  // Initialize data from local storage
  useEffect(() => {
    const storedHabits = getHabits();
    const storedMetrics = getMetrics();
    
    setHabits(storedHabits);
    setMetrics(storedMetrics);
  }, []);

  // Loading state
  if (!metrics) {
    return <div style={{ textAlign: 'center', padding: '50px' }}>加载中...</div>;
  }

  // Calculate completion percentage
  const completionPercentage = Math.round((metrics.habits.completed / metrics.habits.total) * 100);
  
  // Record habit function
  const handleRecordHabit = (id: string) => {
    const result = recordHabit(id);
    setHabits(result.habits);
    setMetrics(result.metrics);
  };
  
  // Add water function
  const handleAddWater = (amount: number) => {
    const updatedMetrics = updateWaterIntake(amount);
    setMetrics(updatedMetrics);
  };

  // Add steps function
  const handleAddSteps = (steps: number) => {
    const updatedMetrics = updateSteps(steps);
    setMetrics(updatedMetrics);
  };

  // Update sleep function
  const handleUpdateSleep = (hours: number) => {
    const updatedMetrics = updateSleep(hours);
    setMetrics(updatedMetrics);
  };

  // Create habit function
  const handleCreateHabit = () => {
    if (!newHabitName.trim()) return;
    
    const newHabit = {
      name: newHabitName,
      icon: newHabitIcon,
      streak: 0,
      completed: false,
    };
    
    const updatedHabits = addHabit(newHabit);
    setHabits(updatedHabits);
    setMetrics({
      ...metrics,
      habits: {
        ...metrics.habits,
        total: updatedHabits.length
      }
    });
    
    // Reset form and close modal
    setNewHabitName('');
    setNewHabitIcon('📝');
    setIsModalVisible(false);
  };

  // Edit habit function
  const handleEditHabit = (habit: HabitRecord) => {
    setEditingHabit(habit);
    setNewHabitName(habit.name);
    setNewHabitIcon(habit.icon);
    setIsModalVisible(true);
  };

  // Update habit function
  const handleUpdateHabit = () => {
    if (!editingHabit || !newHabitName.trim()) return;
    
    const updatedHabits = updateHabit(editingHabit.id, {
      name: newHabitName,
      icon: newHabitIcon,
    });
    
    setHabits(updatedHabits);
    
    // Reset form and close modal
    setEditingHabit(null);
    setNewHabitName('');
    setNewHabitIcon('📝');
    setIsModalVisible(false);
  };

  // Delete habit function
  const handleDeleteHabit = (habitId: string) => {
    if (confirm('确定要删除这个习惯吗？')) {
      const updatedHabits = deleteHabit(habitId);
      setHabits(updatedHabits);
      setMetrics({
        ...metrics,
        habits: {
          ...metrics.habits,
          total: updatedHabits.length,
          completed: updatedHabits.filter(h => h.completed).length
        }
      });
    }
  };

  // Reset habits function
  const handleResetHabits = () => {
    if (confirm('确定要重置今日的所有习惯吗？')) {
      const updatedHabits = resetDailyHabits();
      setHabits(updatedHabits);
      setMetrics({
        ...metrics,
        habits: {
          ...metrics.habits,
          completed: 0
        }
      });
    }
  };

  return (
    <div style={{ 
      maxWidth: '1000px', 
      margin: '0 auto', 
      padding: '20px', 
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
      backgroundColor: '#fff',
      borderRadius: '8px',
      boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
    }}>
      {/* Header */}
      <div style={{ textAlign: 'center', marginBottom: '30px' }}>
        <h1 style={{ fontSize: '28px', color: '#52c41a', margin: '0 0 30px 0' }}>健康习惯追踪器</h1>
        
        {/* Navigation Tabs */}
        <div style={{ display: 'flex', borderBottom: '1px solid #f0f0f0' }}>
          <div 
            onClick={() => setActiveTab('dashboard')}
            style={{ 
              padding: '12px 24px', 
              cursor: 'pointer',
              borderBottom: activeTab === 'dashboard' ? '2px solid #52c41a' : 'none',
              color: activeTab === 'dashboard' ? '#52c41a' : '#333',
              fontWeight: activeTab === 'dashboard' ? 'bold' : 'normal',
            }}
          >
            仪表盘
          </div>
          <div 
            onClick={() => setActiveTab('habits')}
            style={{ 
              padding: '12px 24px', 
              cursor: 'pointer',
              borderBottom: activeTab === 'habits' ? '2px solid #52c41a' : 'none',
              color: activeTab === 'habits' ? '#52c41a' : '#333',
              fontWeight: activeTab === 'habits' ? 'bold' : 'normal',
            }}
          >
            习惯管理
          </div>
          <div 
            onClick={() => setActiveTab('stats')}
            style={{ 
              padding: '12px 24px', 
              cursor: 'pointer',
              borderBottom: activeTab === 'stats' ? '2px solid #52c41a' : 'none',
              color: activeTab === 'stats' ? '#52c41a' : '#333',
              fontWeight: activeTab === 'stats' ? 'bold' : 'normal',
            }}
          >
            数据统计
          </div>
        </div>
      </div>
      
      {/* Dashboard Tab Content */}
      {activeTab === 'dashboard' && (
        <div>
          {/* Metrics Cards */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px', marginBottom: '24px' }}>
            {/* Today's Water Intake */}
            <div style={{ backgroundColor: '#f6ffed', padding: '20px', borderRadius: '8px' }}>
              <h3 style={{ margin: '0 0 20px 0', fontSize: '18px', textAlign: 'center' }}>今日饮水量</h3>
              <div style={{ 
                fontSize: '36px', 
                color: '#52c41a', 
                textAlign: 'center', 
                fontWeight: 'bold',
                margin: '10px 0',
              }}>
                {metrics.waterIntake.current}<span style={{ fontSize: '18px' }}>L</span>
              </div>
              <div style={{ 
                height: '8px', 
                backgroundColor: '#e8e8e8', 
                borderRadius: '4px', 
                margin: '15px 0',
                position: 'relative',
              }}>
                <div style={{ 
                  position: 'absolute',
                  left: 0,
                  top: 0,
                  height: '100%',
                  width: `${(metrics.waterIntake.current / metrics.waterIntake.goal) * 100}%`,
                  backgroundColor: '#52c41a',
                  borderRadius: '4px',
                }}></div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ display: 'flex', gap: '8px' }}>
                  <button 
                    onClick={() => handleAddWater(0.1)} 
                    style={{ 
                      padding: '3px 8px', 
                      backgroundColor: '#52c41a',
                      color: 'white',
                      border: 'none',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      fontSize: '12px'
                    }}
                  >
                    +100ml
                  </button>
                  <button 
                    onClick={() => handleAddWater(0.3)} 
                    style={{ 
                      padding: '3px 8px', 
                      backgroundColor: '#52c41a',
                      color: 'white',
                      border: 'none',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      fontSize: '12px'
                    }}
                  >
                    +300ml
                  </button>
                </div>
                <div style={{ textAlign: 'right', fontSize: '14px', color: '#888' }}>
                  目标: {metrics.waterIntake.goal}L
                </div>
              </div>
            </div>
            
            {/* Today's Steps */}
            <div style={{ backgroundColor: '#f6ffed', padding: '20px', borderRadius: '8px' }}>
              <h3 style={{ margin: '0 0 20px 0', fontSize: '18px', textAlign: 'center' }}>今日步数</h3>
              <div style={{ 
                fontSize: '36px', 
                color: '#52c41a', 
                textAlign: 'center', 
                fontWeight: 'bold',
                margin: '10px 0',
              }}>
                {metrics.steps.current.toLocaleString()}<span style={{ fontSize: '18px' }}>步</span>
              </div>
              <div style={{ 
                height: '8px', 
                backgroundColor: '#e8e8e8', 
                borderRadius: '4px', 
                margin: '15px 0',
                position: 'relative',
              }}>
                <div style={{ 
                  position: 'absolute',
                  left: 0,
                  top: 0,
                  height: '100%',
                  width: `${(metrics.steps.current / metrics.steps.goal) * 100}%`,
                  backgroundColor: '#52c41a',
                  borderRadius: '4px',
                }}></div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ display: 'flex', gap: '8px' }}>
                  <button 
                    onClick={() => handleAddSteps(100)} 
                    style={{ 
                      padding: '3px 8px', 
                      backgroundColor: '#52c41a',
                      color: 'white',
                      border: 'none',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      fontSize: '12px'
                    }}
                  >
                    +100步
                  </button>
                  <button 
                    onClick={() => handleAddSteps(500)} 
                    style={{ 
                      padding: '3px 8px', 
                      backgroundColor: '#52c41a',
                      color: 'white',
                      border: 'none',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      fontSize: '12px'
                    }}
                  >
                    +500步
                  </button>
                </div>
                <div style={{ textAlign: 'right', fontSize: '14px', color: '#888' }}>
                  目标: {metrics.steps.goal.toLocaleString()}步
                </div>
              </div>
            </div>
            
            {/* Yesterday's Sleep */}
            <div style={{ backgroundColor: '#f6ffed', padding: '20px', borderRadius: '8px' }}>
              <h3 style={{ margin: '0 0 20px 0', fontSize: '18px', textAlign: 'center' }}>昨日睡眠</h3>
              <div style={{ 
                fontSize: '36px', 
                color: '#52c41a', 
                textAlign: 'center', 
                fontWeight: 'bold',
                margin: '10px 0',
              }}>
                {metrics.sleep.current}<span style={{ fontSize: '18px' }}>小时</span>
              </div>
              <div style={{ 
                height: '8px', 
                backgroundColor: '#e8e8e8', 
                borderRadius: '4px', 
                margin: '15px 0',
                position: 'relative',
              }}>
                <div style={{ 
                  position: 'absolute',
                  left: 0,
                  top: 0,
                  height: '100%',
                  width: `${(metrics.sleep.current / metrics.sleep.goal) * 100}%`,
                  backgroundColor: '#52c41a',
                  borderRadius: '4px',
                }}></div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ display: 'flex', gap: '8px' }}>
                  <button 
                    onClick={() => handleUpdateSleep(Math.max(0, metrics.sleep.current - 0.5))} 
                    style={{ 
                      padding: '3px 8px', 
                      backgroundColor: '#ff4d4f',
                      color: 'white',
                      border: 'none',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      fontSize: '12px'
                    }}
                  >
                    -0.5h
                  </button>
                  <button 
                    onClick={() => handleUpdateSleep(Math.min(metrics.sleep.goal, metrics.sleep.current + 0.5))} 
                    style={{ 
                      padding: '3px 8px', 
                      backgroundColor: '#52c41a',
                      color: 'white',
                      border: 'none',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      fontSize: '12px'
                    }}
                  >
                    +0.5h
                  </button>
                </div>
                <div style={{ textAlign: 'right', fontSize: '14px', color: '#888' }}>
                  目标: {metrics.sleep.goal}小时
                </div>
              </div>
            </div>
            
            {/* Habit Completion Rate */}
            <div style={{ backgroundColor: '#f6ffed', padding: '20px', borderRadius: '8px' }}>
              <h3 style={{ margin: '0 0 20px 0', fontSize: '18px', textAlign: 'center' }}>习惯完成率</h3>
              <div style={{ 
                fontSize: '36px', 
                color: '#52c41a', 
                textAlign: 'center', 
                fontWeight: 'bold',
                margin: '10px 0',
              }}>
                {completionPercentage}<span style={{ fontSize: '18px' }}>%</span>
              </div>
              <div style={{ 
                height: '8px', 
                backgroundColor: '#e8e8e8', 
                borderRadius: '4px', 
                margin: '15px 0',
                position: 'relative',
              }}>
                <div style={{ 
                  position: 'absolute',
                  left: 0,
                  top: 0,
                  height: '100%',
                  width: `${completionPercentage}%`,
                  backgroundColor: '#52c41a',
                  borderRadius: '4px',
                }}></div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <button 
                  onClick={handleResetHabits} 
                  style={{ 
                    padding: '3px 8px', 
                    backgroundColor: '#fff',
                    color: '#ff4d4f',
                    border: '1px solid #ff4d4f',
                    borderRadius: '4px',
                    cursor: 'pointer',
                    fontSize: '12px'
                  }}
                >
                  重置
                </button>
                <div style={{ textAlign: 'right', fontSize: '14px', color: '#888' }}>
                  {metrics.habits.completed}/{metrics.habits.total} 已完成
                </div>
              </div>
            </div>
          </div>
          
          {/* Today's Habits */}
          <div>
            <h2 style={{ fontSize: '22px', margin: '30px 0 20px', fontWeight: 'normal' }}>今日习惯</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
              {habits.map(habit => (
                <div key={habit.id} style={{ 
                  display: 'flex', 
                  alignItems: 'center', 
                  padding: '16px', 
                  backgroundColor: '#f6ffed', 
                  borderRadius: '8px',
                  border: '1px solid #e8e8e8',
                }}>
                  <div style={{ 
                    width: '40px', 
                    height: '40px', 
                    backgroundColor: '#e6f7ff', 
                    borderRadius: '50%', 
                    display: 'flex', 
                    alignItems: 'center', 
                    justifyContent: 'center',
                    marginRight: '16px',
                    fontSize: '20px',
                  }}>
                    {habit.icon}
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: '16px' }}>{habit.name}</div>
                    <div style={{ fontSize: '12px', color: '#8c8c8c' }}>连续 {habit.streak} 天</div>
                  </div>
                  <button 
                    style={{ 
                      backgroundColor: habit.completed ? '#d9d9d9' : '#52c41a', 
                      color: 'white', 
                      border: 'none', 
                      padding: '6px 16px', 
                      borderRadius: '4px', 
                      cursor: habit.completed ? 'default' : 'pointer',
                      opacity: habit.completed ? 0.7 : 1,
                    }}
                    onClick={() => !habit.completed && handleRecordHabit(habit.id)}
                    disabled={habit.completed}
                  >
                    记录
                  </button>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
      
      {/* Habits Management Tab Content */}
      {activeTab === 'habits' && (
        <div>
          <h2 style={{ fontSize: '22px', margin: '20px 0', fontWeight: 'normal' }}>习惯管理</h2>
          <p>在此页面，您可以创建新习惯、编辑和删除现有习惯。</p>
          
          <div style={{ marginTop: '20px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
            {habits.map(habit => (
              <div key={habit.id} style={{ 
                display: 'flex', 
                alignItems: 'center', 
                padding: '16px', 
                backgroundColor: 'white', 
                borderRadius: '8px',
                border: '1px solid #e8e8e8',
              }}>
                <div style={{ 
                  width: '40px', 
                  height: '40px', 
                  backgroundColor: '#e6f7ff', 
                  borderRadius: '50%', 
                  display: 'flex', 
                  alignItems: 'center', 
                  justifyContent: 'center',
                  marginRight: '16px',
                  fontSize: '20px',
                }}>
                  {habit.icon}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: '16px' }}>{habit.name}</div>
                  <div style={{ fontSize: '12px', color: '#8c8c8c' }}>已坚持 {habit.streak} 天</div>
                </div>
                <div>
                  <button 
                    style={{ 
                      backgroundColor: 'white', 
                      color: '#52c41a', 
                      border: '1px solid #52c41a', 
                      padding: '4px 12px', 
                      borderRadius: '4px', 
                      cursor: 'pointer',
                      marginRight: '8px',
                    }}
                    onClick={() => handleEditHabit(habit)}
                  >
                    编辑
                  </button>
                  <button 
                    style={{ 
                      backgroundColor: 'white', 
                      color: '#ff4d4f', 
                      border: '1px solid #ff4d4f', 
                      padding: '4px 12px', 
                      borderRadius: '4px', 
                      cursor: 'pointer',
                    }}
                    onClick={() => handleDeleteHabit(habit.id)}
                  >
                    删除
                  </button>
                </div>
              </div>
            ))}
            <button 
              style={{ 
                backgroundColor: '#52c41a', 
                color: 'white', 
                border: 'none', 
                padding: '10px 20px', 
                borderRadius: '4px', 
                cursor: 'pointer',
                width: 'fit-content',
                margin: '20px auto',
                fontSize: '16px',
              }}
              onClick={() => {
                setEditingHabit(null);
                setNewHabitName('');
                setNewHabitIcon('📝');
                setIsModalVisible(true);
              }}
            >
              + 添加新习惯
            </button>
          </div>
        </div>
      )}
      
      {/* Statistics Tab Content */}
      {activeTab === 'stats' && (
        <div>
          <h2 style={{ fontSize: '22px', margin: '20px 0', fontWeight: 'normal' }}>数据统计</h2>
          <p>该页面显示您的健康习惯数据统计和趋势分析。</p>
          
          <div style={{ marginTop: '30px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
            <div style={{ 
              padding: '20px', 
              backgroundColor: '#f6ffed', 
              borderRadius: '8px',
            }}>
              <h3 style={{ margin: '0 0 15px 0' }}>饮水量趋势 (过去7天)</h3>
              <div style={{ height: '150px', backgroundColor: '#fff', borderRadius: '4px', display: 'flex', alignItems: 'flex-end', padding: '10px' }}>
                {metrics.waterIntake.history.map((day, index) => (
                  <div 
                    key={index}
                    style={{ 
                      flexGrow: 1, 
                      height: `${(day.value / metrics.waterIntake.goal) * 100}%`, 
                      backgroundColor: index === metrics.waterIntake.history.length - 1 ? '#52c41a' : '#b7eb8f', 
                      margin: '0 5px', 
                      borderRadius: '2px 2px 0 0',
                      position: 'relative',
                    }}
                  >
                    <div style={{ 
                      position: 'absolute', 
                      top: '-20px', 
                      left: '50%', 
                      transform: 'translateX(-50%)',
                      fontSize: '12px',
                      color: '#888', 
                    }}>
                      {day.value.toFixed(1)}L
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '8px', fontSize: '12px', color: '#888' }}>
                <span>周一</span>
                <span>周二</span>
                <span>周三</span>
                <span>周四</span>
                <span>周五</span>
                <span>周六</span>
                <span>周日</span>
              </div>
            </div>
            
            <div style={{ 
              padding: '20px', 
              backgroundColor: '#f6ffed', 
              borderRadius: '8px',
            }}>
              <h3 style={{ margin: '0 0 15px 0' }}>习惯完成统计</h3>
              <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '20px' }}>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: '36px', color: '#52c41a', fontWeight: 'bold' }}>{completionPercentage}%</div>
                  <div style={{ fontSize: '14px', color: '#888' }}>总完成率</div>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: '36px', color: '#52c41a', fontWeight: 'bold' }}>
                    {Math.max(...habits.map(h => h.streak))}
                  </div>
                  <div style={{ fontSize: '14px', color: '#888' }}>最长连续天数</div>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: '36px', color: '#52c41a', fontWeight: 'bold' }}>{habits.length}</div>
                  <div style={{ fontSize: '14px', color: '#888' }}>习惯总数</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
      
      {/* Modal for Creating/Editing Habits */}
      {isModalVisible && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          zIndex: 1000
        }}>
          <div style={{
            backgroundColor: 'white',
            borderRadius: '8px',
            padding: '24px',
            width: '80%',
            maxWidth: '400px',
          }}>
            <h3 style={{ marginTop: 0 }}>{editingHabit ? '编辑习惯' : '创建新习惯'}</h3>
            
            <div style={{ marginBottom: '16px' }}>
              <label style={{ display: 'block', marginBottom: '8px' }}>习惯名称</label>
              <input 
                type="text" 
                value={newHabitName} 
                onChange={(e) => setNewHabitName(e.target.value)}
                style={{ 
                  width: '100%', 
                  padding: '8px', 
                  borderRadius: '4px', 
                  border: '1px solid #d9d9d9',
                  boxSizing: 'border-box',
                }}
                placeholder="输入习惯名称"
              />
            </div>
            
            <div style={{ marginBottom: '24px' }}>
              <label style={{ display: 'block', marginBottom: '8px' }}>图标</label>
              <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                {['📝', '💧', '🏃', '📚', '🧘', '💪', '🥗', '💤', '🧠', '🌱'].map(icon => (
                  <button 
                    key={icon}
                    onClick={() => setNewHabitIcon(icon)}
                    style={{ 
                      width: '40px', 
                      height: '40px', 
                      fontSize: '20px',
                      backgroundColor: newHabitIcon === icon ? '#e6f7ff' : 'white',
                      border: newHabitIcon === icon ? '2px solid #1890ff' : '1px solid #d9d9d9',
                      borderRadius: '4px',
                      cursor: 'pointer',
                    }}
                  >
                    {icon}
                  </button>
                ))}
              </div>
            </div>
            
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px' }}>
              <button 
                onClick={() => setIsModalVisible(false)}
                style={{ 
                  padding: '8px 16px', 
                  backgroundColor: 'white', 
                  border: '1px solid #d9d9d9', 
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
              >
                取消
              </button>
              <button 
                onClick={editingHabit ? handleUpdateHabit : handleCreateHabit}
                style={{ 
                  padding: '8px 16px', 
                  backgroundColor: '#52c41a', 
                  color: 'white', 
                  border: 'none', 
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
              >
                {editingHabit ? '更新' : '创建'}
              </button>
            </div>
          </div>
        </div>
      )}
      
      {/* Footer */}
      <div style={{ textAlign: 'center', marginTop: '40px', color: '#8c8c8c', fontSize: '12px' }}>
        由 Trae AI 辅助创建 | 数据仅存储在本地，保护您的隐私
      </div>
    </div>
  );
} 